const path = require('path')
const webpack = require('webpack')
// 只要是插件，都一定要放到 plugins 节点中去
// 这个插件的两个作用：
// 1. 自动在内存中根据指定页面生成一个内存的页面
// 2. 自动，把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader') // vue-loader@15.x 需要导入VueLoaderPlugin插件

// 这个配置文件，其实就是一个JS文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports = {
  // 手动指定 入口 和 出口
  entry: path.join(__dirname, './src/main.js'), // 入口，表示，要使用 webpack 打包哪个文件
  output: { // 输出文件相关的配置
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js' // 指定输出文件的名称
  },
  plugins: [
    new htmlWebpackPlugin({ // 创建一个在内存中生成html页面的插件
      template: path.join(__dirname, './src/index.html'), // 指定模板页面
      filename: 'index.html' // 指定生成的页面名称
    }),
    new webpack.ProvidePlugin({ $ : "jquery" }),  // 如需jquery请解锁
    new webpack.HotModuleReplacementPlugin(),
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ],
  mode: 'development',
  devServer: {
    historyApiFallback: true, // 如果为 true ，页面出错不会弹出 404 页面。
    hot: true,
    port: 3000,
    open: true,
    // proxy: {
    //   '/index.php': {
    //     traget: 'http://127.0.0.1/index.php',
    //     // pathRewrite: { '^/api' : '' },
    //     changeOrigin: true,
    //     // secure: false // 要运行 https 的情况
    //   }
    // }
  },
  module: { // 这个节点，用于配置 所有 第三方模块 加载器
    rules: [ // 所有第三方模块的 匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css 文件的第三方loader规则
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=329026&name=[hash:8]-[name].[ext]' }, // 处理图片路径
      // 图片默认会转为 base64
      // 图片大小（byte字节） <= limit ，则会把图片转为 DataURL
      { test: /\.(eot|woff|woff2|svg|ttf)$/, use: 'url-loader' }, // 处理字体文件
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // Babel
      { test: /.vue$/, use: 'vue-loader' } // vue
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

// 当我们在 控制台 ，直接输入 webpack 命令执行的时候， webpack 做了以下几步：
// 1. 首先，webpack 发现，我们并没有通过命令的形式， 给它指定入口和出口
// 2. webpack 就会去 项目的 根目录中，查找一个叫做 webpack.config.js 的配置文件
// 3. 当找到配置文件后， webpack 会去解析执行这个 配置文件， 当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
// 4. 当 webpack 拿到 配置对象 后，就拿到了 配置对象 中指定的 入口 和 出口，然后进行打包构建